<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>文件上载演示</title>
  <script src="bower_components/jquery/dist/jquery.min.js" ></script>
  <script src="bower_components/bootstrap/dist/js/bootstrap.min.js" ></script>
  <script src="bower_components/vue/dist/vue.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
</head>
<body>
<form id="demoForm" method="post"
      enctype="multipart/form-data"
      action="/upload/file" >
  <div>
    <label>上传文件
      <input id="imageFile" type="file" name="imageFile">
    </label>
  </div>
  <button type="submit">上传文件</button>
</form>
<img id="image" src="http://localhost:8899/a.png"  alt="">
<script>

  $("#demoForm").submit(function (){
    let files = document.getElementById("imageFile".files);
    if(files.length>0){
      uploadFile(files[0]);
    }else {
      alert("请选择上传的文件/图片")
    }
    return false;
  })
  function uploadFile(file){
    let form=new FormData();
    form.append("imageFile",file);
    axios({
      url:"/upload/file",
      method:"post",
      data:form
    }).then(function (response) {
      console.log(response.data);
      //将上传图片显示用的url赋值给img表标签的src属性
      $("#image").attr("src",response.data);
    })
  }

</script>
</body>
</html>